<template>
  <div class="vehicleDetails">
    <!-- 详情内容 -->
    <div class="details-content">
      <!-- 行驶证正面 -->
      <div style="display: flex;flex-wrap: nowrap;height: 300px;">
        <!-- 行驶证正面 左侧-->
        <div class="driving-license-left">
          <div class="driving-license-title">行驶证正面</div>
          <div style="margin-left: 20px;">
            <img :src="getUrl(detail.licenseFirstImg)">
          </div>
        </div>
        <!-- 行驶证正面 右侧-->
        <div class="driving-license-right">
          <div style="margin: 20px;">
            <el-form
              label-width="120px"
            >
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="车牌号：">
                    <span>{{ detail.licenseNo }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="使用性质：">
                    <span>{{ detail.useNature }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="车牌颜色：">
                    <span>{{ detail.licenseColour }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车辆所有人：">
                    <span>{{ detail.owner }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="行驶证住址：">
                    <span>{{ detail.licenseAddress }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车辆识别代码：">
                    <span>{{ detail.identificationCode }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="发证机关：">
                    <span>{{ detail.licenceIssuingAuthority }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车辆类型全称：">
                    <span>{{ detail.typeFullName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="注册日期：">
                    <span>{{ detail.licenceRegisterTime }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="发证日期：">
                    <span>{{ detail.certificateTime }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 行驶证背面 -->
      <div style="display: flex;flex-wrap: nowrap;height: 230px;">
        <!-- 行驶证背面 左侧-->
        <div class="driving-license-left">
          <div class="driving-license-title">行驶证背面</div>
          <div style="margin-left: 20px;">
            <img :src="getUrl(detail.licenseSecondImg)">
          </div>
        </div>
        <!-- 行驶证背面 右侧-->
        <div class="driving-license-right">
          <div style="margin: 20px;">
            <el-form label-width="120px">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="额定载重：">
                    <span>{{ detail.ratedLoad }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="车辆载重：">
                    <span>{{ detail.ratedLoad }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="强制报废期：" prop="mandatoryScrappingTime">
                    <span>{{ detail.mandatoryScrappingTime }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="档案编号：" prop="fileNo">
                    <span>{{ detail.fileNo }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="车辆能源类型：">
                    <span>{{ detail.energyTypeId }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 道路运输证 -->
      <div style="display: flex;flex-wrap: nowrap;height: 260px;">
        <!-- 道路运输证 左侧-->
        <div class="driving-license-left">
          <div class="driving-license-title">道路运输证</div>
          <div style="margin-left: 20px;">
            <img :src="getUrl(detail.transportLicenseImg)">
          </div>
        </div>
        <!-- 道路运输证 右侧-->
        <div class="driving-license-right">
          <div style="margin: 20px;">
            <el-form
              label-width="140px"
            >
              <el-form-item label="道路运输证编号：">
                <span>{{ detail.transportLicenseNo }}</span>
              </el-form-item>
              <el-form-item label="有效期起：">
                <span>{{ detail.transportLicenseStartTime }}</span>
              </el-form-item>
              <el-form-item label="有效期至：">
                <span>{{ detail.transportLicenseEndTime }}</span>
              </el-form-item>
              <el-form-item label="是否有效：" disabled prop="transportLicenseStatus">
                <span>{{ detail.transportLicenseStatus == 'ACTIVE' ? '有效' : detail.transportLicenseStatus == 'INVALID' ? '过期' : '即将过期' }}</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 操作日志 -->
      <div style="height: 260px;">
        <!-- 操作日志 -->
        <div>
          <div class="driving-license-title">操作日志</div>
        </div>
        <div style="margin: 20px;">
          <el-table
            v-loading="listLoading"
            :data="list"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column type="index" width="50" />
            <el-table-column property="status" label="状态" width="120" />
            <el-table-column property="name" label="操作人" width="120" />
            <el-table-column property="lastUpdateTime" label="操作时间" />
            <el-table-column property="remark" label="备注" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { carDetail } from '@/api/tms/car'
import { supplyUrl } from '@/api/common/file'
export default {
  data() {
    return {
      detail: {},
      list: [],
      listLoading: false,
      params: {}
    }
  },
  created() {
    this.params = this.$route.params
    this.details()
  },
  methods: {
    details() {
      carDetail(this.params.id).then((response) => {
        this.detail = response
      })
    },
    getUrl(url) {
      return supplyUrl(url)
    }
  }

}
</script>
<style lang="scss">
.vehicleDetails{
  padding: 30px 0;
  .hide .el-upload--picture-card {
        display: none;
      }
    .details-content {
        border: 1px solid #E4E4E4;
        width: 95%;
        margin: 0 auto;
        height: 1000px;
    }

    .driving-license-left {
        border-bottom: 1px solid #E4E4E4;
        border-right: 1px solid #E4E4E4;
        width: 35%;
    }

    .driving-license-title {
        border-left: 2px solid #FFB500;
        width: 100px;
        text-align: center;
        font-size: 16px;
        margin: 20px;
    }

    .driving-license-right {
        border-bottom: 1px solid #E4E4E4;
        width: 65%;
        /* margin: 20px; */
    }
    .dialog-footer{
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }
}
img{
	width: 140px;
	height: 140px;
}
</style>
